<template>
    <div class="soft-box files">
        <!--        上传文件对话框-->
        <UploadFileDialog v-model="showUpload" @upload="uploadRes"/>

<!--        浮动菜单-->
        <v-menu
                v-model="searchData.dialog"
                :close-on-content-click="false"
                :nudge-width="200"
                offset-x
        >
            <template v-slot:activator="{ on, attrs }">
                <v-btn
                        color="pink"
                        fixed
                        fab
                        dark
                        bottom
                        right
                        style="bottom: 10%;right: 10%"
                        v-bind="attrs"
                        v-on="on"
                >
                    <v-icon>mdi-plus</v-icon>
                </v-btn>
            </template>
            <div class="footer-action soft-box">
                <v-row class="flex justify-space-between" style="margin: 0.5rem 0">
                    <span class="blue--text"> 查找内容 </span>
                    <v-icon slot="append" color="red" @click="searchData.dialog = false">
                        mdi-close
                    </v-icon>
                </v-row>
                <div class="search flex flex-row">
                    <v-text-field v-model="searchData.searchText" placeholder="搜索名字或者文件夹进行查找文件">

                    </v-text-field>
                    <v-btn
                            @click="searchFile(searchData.searchText)"
                    >
                        搜索
                    </v-btn>
                    <v-btn
                            class="ma-2"
                            color="primary"
                            @click="showUpload = true"
                    >
                        上传
                    </v-btn>
                </div>
                <div class="heading">
                    <div class="chips">
                        <v-menu
                                v-model="chipData.dialog"
                                :close-on-content-click="false"
                                :nudge-width="200"
                                offset-x
                        >
                            <template v-slot:activator="{ on, attrs }">
                                <v-chip
                                        class="ma-2"
                                        color="primary"
                                        outlined
                                        v-bind="attrs"
                                        v-on="on"
                                >
                                    <v-icon left> mdi-chip</v-icon>
                                    添加文件夹
                                </v-chip>
                            </template>
                            <div style="padding: 1rem">
                                <v-row class="flex justify-space-between" style="margin: 0.5rem 0">
                                    <span class="blue--text"> 添加文件夹 </span>
                                    <v-icon slot="append" color="red" @click="chipData.dialog = false">
                                        mdi-close
                                    </v-icon>
                                </v-row>

                                <v-text-field placeholder="添加文件夹" v-model="chipData.addText"/>
                                <v-btn
                                        color="primary"
                                        @click="addChipOne"
                                        :loading="chipData.loading"
                                >
                                    创建卡片目录
                                </v-btn>
                            </div>
                        </v-menu>
                        <v-chip
                                @click="currentFolder === null? getData() : currentFolder = null "
                                class="ma-2"
                                color="pink"
                                label
                                text-color="white"
                        >
                            <v-icon left>
                                mdi-folder-home
                            </v-icon>
                            根目录
                        </v-chip>
                        <v-chip
                                @click="currentFolder = ''"
                                class="ma-2"
                                color="pink"
                                label
                                text-color="white"
                        >
                            <v-icon left>
                                mdi-folder-home
                            </v-icon>
                            所有文件
                        </v-chip>

                        <div class="chips-main">
                            <v-chip
                                    v-for="(chip,index) in foldersData"
                                    :key="index"
                                    class="ma-2"
                                    color="pink"
                                    close
                                    @click="currentFolder = chip.name"
                                    @click:close="removeChip(index)"
                                    label
                                    text-color="white"
                            >
                                <v-icon left>
                                    mdi-folder
                                </v-icon>
                                {{chip.name}}
                            </v-chip>
                        </div>
                    </div>
                </div>
            </div>
        </v-menu>


        <div class="files-list-box flex align-center">
            <FileList :files="files" />
        </div>
    </div>
</template>

<script>
    import {_, db} from '../common/cloudbase';
    import UploadFileDialog from "../components/UploadFileDialog";
    import {mapState} from "vuex";
    import Chips from "../common/model/Chips";
    import FileList from "../components/FileList";

    export default {
        name: "Files",
        components: {FileList, UploadFileDialog},
        data: () => ({
            searchData: {
                searchText: '',
                dialog: false
            },
            showUpload: false,
            files: [],
            currentFolder: null,
            chipData: {
                dialog: false,
                addText: null,
                loading: false,
                selectedIndex: null,
            },
        }),
        computed: {
            ...mapState(['foldersData'])
        },
        methods: {

            uploadRes(data){
                this.files.unshift(data);
            },
            async searchFile(search) {
                let filesCollection = db.collection("files");
                let select = {};
                select.folder = new db.RegExp({
                    regexp: '.*' + search,   // 正则表达式为 /^\ds/，转义后变成 '^\\ds'
                    options: 'i'    // i表示忽略大小写
                })
                select.filename = new db.RegExp({
                    regexp: '.*' + search,   // 正则表达式为 /^\ds/，转义后变成 '^\\ds'
                    options: 'i'    // i表示忽略大小写
                })
                let res = await filesCollection.where(_.or({folder: select.folder}, {filename: select.filename})).get();
                let files = res.data;
                if(files.length <= 0 ){
                    alert("暂无数据");
                }
                this.files = files.reverse();
            },
            /**
             * 删除一个文件夹卡片
             */
            async removeChip(index) {
                if (!confirm("是否要删除这个卡片文件夹")) return;
                try {
                    let chip = this.foldersData[index];
                    let removeRes = await Chips.remove(chip._id);
                    if (removeRes) {
                        this.foldersData.splice(index, 1);
                    }
                } catch (err) {
                    alert("删除失败");
                }
            },
            /**
             * 添加一个文件夹卡片
             */
            async addChipOne() {
                this.chipData.loading = true;
                let txt = this.chipData.addText;
                if (!txt) {
                    alert("你还没有填写数据");
                    this.chipData.loading = false;
                    return;
                }
                try {
                    let addRes = await Chips.add(txt);
                    if (addRes) {
                        this.foldersData.push(addRes);
                        this.chipData.addText = null;
                        this.chipData.dialog = false;
                        alert("添加成功");
                    }
                    this.chipData.loading = false;
                } catch (err) {
                    alert("添加失败");
                    this.chipData.loading = false;
                }
            },
            async getData() {
                let filesCollection = db.collection("files");

                let select = {};
                let folder = this.currentFolder;
                if(folder === null||folder){
                    select.folder = folder;
                }



                let res = await filesCollection.where(select).get();
                let files = res.data;
                if(files.length <= 0 ){
                    alert("暂无数据");
                }
                this.files = files.reverse();
            }
        },
        async mounted() {
            this.getData();
        },
        watch: {
            currentFolder() {
                this.searchData.dialog = false;
                this.getData();
            }
        }
    }
</script>

<style scoped lang="scss">
    .files {
        width: 90%;
        max-width: 50rem;
    }

    .footer-action {
        width: 30rem;
        max-width: 100%;
        .chips-main {
            height: 10rem;
            overflow-y: scroll;
        }
    }


    .files-list-box {
        max-height: 30rem;
        overflow-y: scroll;
    }

    .files-list {
        .files-list-item {
            margin: .5rem;
            border-radius: 1rem;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            span {
                margin-top: 1rem;
                font-size: 12px;
            }
        }
    }
</style>